<template>
  <div>
    <a-popover
      title="Title"
      trigger="hover"
    >
      <template #content>
        <p>Content</p>
        <p>Content</p>
      </template>
      <a-button type="primary">Hover me</a-button>
    </a-popover>
    <a-popover
      title="Title"
      trigger="click"
    >
      <template #content>
        <p>Content</p>
        <p>Content</p>
      </template>
      <a-button type="primary">Hover me</a-button>
    </a-popover>
    <a-popover
      title="Title"
      trigger="hover"
      placement="topLeft"
      v-model:open="visible"
      arrow-point-at-center
    >
      <template #content>
        <p>Content</p>
        <p>Content</p>
        <a @click="hide">Close</a>
      </template>
      <a-button type="primary">Hover me</a-button>
    </a-popover>
    <a-popover
      style="width: 500px"
      title="Hover title"
      trigger="hover"
      :open="hovered"
      @openChange="handleHoverChange"
    >
      <template #content>
        <div>This is hover content.</div>
      </template>
      <a-popover
        title="Click title"
        trigger="click"
        :open="clicked"
        @openChange="handleClickChange"
      >
        <template #content>
          <div>
            <div>This is click content.</div>
            <a @click="hide">Close</a>
          </div>
        </template>
        <a-button>Hover and click / 悬停并单击</a-button>
      </a-popover>
    </a-popover>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  data() {
    return {
      visible: false,
      clicked: false,
      hovered: false,
    }
  },
  created() { },
  mounted() { },
  methods: {
    hide() {
      this.visible = false
    },
    handleHoverChange(visible) {
      this.clicked = false
      this.hovered = visible
    },
    handleClickChange(visible) {
      this.clicked = visible
      this.hovered = false
    }
  },
  computed: {}
}
</script>
<style scoped lang='scss'>
</style>
